<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>综合案例</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success" size="small">成功按钮</el-button>
    <el-button type="info" size="mini">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger" icon="el-icon-lightning">危险按钮</el-button>
    <el-button type="text">文字按钮</el-button>
    <el-button type="warning" loading>数据加载中</el-button>
  </el-row>

  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>

  <el-row>
    <el-button disabled>禁用按钮</el-button>
    <el-button type="primary" disabled>主要按钮</el-button>
    <el-button type="success" disabled>成功按钮</el-button>
    <el-button type="info" disabled>信息按钮</el-button>
    <el-button type="warning" disabled>警告按钮</el-button>
    <el-button type="danger" disabled>危险按钮</el-button>
  </el-row>

  <el-table
    :data="userList"
    style="width: 100%" border stripe>
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱">
    </el-table-column>
  </el-table>
</div>

<script src="vue.js"></script>
<script src="axios.js"></script>
<!-- 引入element组件库,必须在vue引入后再引入 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: {
      userList: []
    },
    created() {
      this.getUserList()
    },
    methods: {
      getUserList() {
        const request = axios.create({
          baseURL: 'http://localhost:8080',
          timeout: 3000,
        })
        // request({
        //   url: '/user/list',
        //   method: 'get'
        // }).then(response => {
        //   this.userList = response.data
        // }).catch(error => {
        //   console.log('数据获取失败', error)
        // })

        request
          .get('/user/list')
          .then(response => {
            this.userList = response.data
          })
          .catch(error => {
            console.log('数据获取失败', error)
          })
      }
    }
  })
</script>
</body>
</html>